<template>
  <div>
    <div>
      <ul>
        <li v-for="item in this.getCollectData" class="menu-li">
          <div class='menu-contant'>
            <img :src="item.smallImg">
            <div class="text">
              <p>{{item.cpName}}</p>
              <div class="des">{{item.des}}</div>
              <div class="add">
                <div class="detail" @click="more(item)">
                  <router-link to="/save">查看详情</router-link>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {mapActions,mapGetters} from "vuex"
  export default {
    data() {
      return {
        show:true
      }
    },
    computed:{
      ...mapGetters(['getCollectData'])
    },
    methods: {
      ...mapActions(['showListMore','addCollect']),
      more(item){
        this.showListMore({item})
      },
      addToCollect(item){
        this.addCollect({item})
      }
    }
  }
</script>

<style lang="less" scoped>
  ul{
    background-color: #954a3b;
  }
  .menu-li {
    display: flex;
    margin-top: 5px;
    .menu-contant {
      display: flex;
      flex: 1;
      padding: 30px;
      margin-left: 40px;
      margin-right:40px;
      border-bottom: 1px solid white;
      img{
        width: 203px;
        height:155px;
      }
      .text{
        margin-left: 50px;
        display: inline-block;
        height:106px ;
        flex: 1;
        font-size: 25px;
        color: white;
        .des{
          display: inline-block;
          margin-top: 20px;
          overflow: hidden;
          font-size: 20px;
          height: 55px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        p{
          text-overflow: ellipsis;
          white-space:nowrap
        }
        .add{
          display: flex;
          flex: 1;
          position: relative;
          margin-top: 15px;
          font-size: 18px;
          margin-right: 0px;
          .add-to-collect{
            display: inline-block;
            position: absolute;
            right: 0px;
          }
          .detail{
            a{
              color: white;
            }
          }
        }
      }
    }
  }

</style>
